Vue元件:
VUE 的元件是什麼?簡單來說,元件就像是獨立的小工具,可以幫我們把畫面拆分成一塊一塊的,讓程式碼看起來更簡潔,也更容易維護。
這樣一來,不僅可以提升開發效率,也能使我們的程式碼更容易重複使用。
一開始,會將元件的邏輯寫在一個獨立的 JavaScript 檔案中。這樣做的好處是,我們可以把邏輯和畫面分開,讓程式碼更有組織性。假設我們要做一個計數器的元件,我們可以在 JavaScript 檔案中寫下計數的邏輯,而不用混在 HTML 中,讓程式碼更清晰易讀。
在 HTML 檔案,我們會寫下元件的外貌,也就是它在網頁上的長相。
可以使用 Vue 的模板語法,像是 {{ }} 或者 v-bind 等等來綁定在 JavaScript 中定義的資料,這樣當資料變動時,畫面也會跟著更新。
最後要將寫好的元件引入到主檔案中,這樣才能在整個應用程式中使用。
總結來說,使用 VUE 的元件開發可以讓程式碼更有組織性,也更容易維護。
透過將邏輯和畫面分開寫,讓程式碼更清晰易讀。
元件註冊component:
在 Vue 中創建一個元件,可以使用 Vue.component 方法,並指定組件名稱和元件的配置:
Vue.component('my-component', {
// 組件的配置選項
});
範例:
Js:
Vue.component('counter-component', {
data() {
return {
count: 0
}
},
template: `
<div>
<button @click="count++">完成任務</button>
<p>已完成 {{ count }} 項任務</p>
</div>
`
});
new Vue({
el: '#app'
});
在這段程式碼中,定義了一個名為 counter-component 的 Vue 元件,並在 data 中設置了一個 count 變數,
預設值為 0。接著在 template 中寫下了一個按鈕,當按下時,會使 count 增加,同時顯示已完成的任務數量。
app.html:
<!-- app.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待辦事項清單</title>
</head>
<body>
<div id="app">
<counter-component></counter-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="CounterComponent.js"></script>
</body>
</html>
在這段程式碼中,引入了 Vue 的 CDN,以及剛剛建立的 CounterComponent.js 檔案。
接著在 #app 中使用了<counter-component></counter-component>
來引入了我們的計數器元件。
最後打開瀏覽器,用瀏覽器開啟 app.html,就會看到一個簡單的待辦事項清單,包含了一個可以計數的元件了!